{% extends "mturk/base_fixed.html" %}
{% load humanize %}
{% load compress %}

{% block css %}{{ block.super }}
<style>
	#mt-top-padding { height: 60px; }
	#mt-instructions { padding: 5px; }
	#mt-instructions > span { margin-top: 0px; }
	body { padding: 0px; }
	iframe { border: none; }
</style>
{% endblock %}

{% block content %}
<div id="mt-top">
	<div id="mt-instructions">
		<span>
			<button id='btn-zoom-in' type="button" class="btn btn-zoom" disabled="disabled"><i class="icon-resize-full"></i> Zoom in</button>&nbsp;
			<button id='btn-zoom-out' type="button" class="btn btn-zoom" disabled="disabled"><i class="icon-resize-small"></i> Zoom out</button>&nbsp;
			<button id='btn-fine' type="button" class="btn btn-zoom" disabled="disabled" data-toggle="button"><i class="icon-eye-open"></i> Fine adjustment</button>
		</span>

		<span style="margin-left:200px">This is image <span id="image-count">1</span> of {{ num_contents }}.</span>

		<span class="pull-right">
			<a href="#modal-instructions" role="button" class="btn" data-toggle="modal">Instructions</a>&nbsp;
			<button type="button" id='btn-submit' class="btn btn-primary" disabled="disabled">Submit</button>
		</span>
	</div>
</div>
<div id="mt-top-padding"></div>

<div class="container">
	<div class="row" id="mt-steps" style="padding-bottom:5px">
		<div class="span6">
			<span class="label label-inverse">Step 1</span>&nbsp;&nbsp;Drag the left image (left mouse button) so that the blue arrow points away from the surface and the green grid is aligned with the surface.  Rotate the grid with the right mouse button.
		</div>
		<div class="span6">
			<span class="label label-inverse">Step 2</span>&nbsp;&nbsp;You can also adjust the shape here on the right.  <u>Drag with the <i>right</i> mouse button to rotate.</u>  Tiles and wood patterns should appear parallel, and rectangles inside the shape should have 90 degree right angles.
		</div>
	</div>
	<div class="row">
		<div class="span6">
			<div id="mt-container"></div>
		</div>
		<div class="span6">
			<iframe id="frame-rectify" name="frame-rectify"
				width="450px" height="450px" border="none"></iframe>
		</div>
	</div>
</div>
{% endblock content %}

{% block modals %}{{ block.super }}
{% endblock modals %}

{% block scripts %}{{ block.super }}

{% include "mturk/loading_script.html" %}
{% include "mturk/content_script.html" with array_js="material_shape_array.js" %}

<script type="text/javascript">
window.rectify_src = '{{ STATIC_URL }}rectify.html';
</script>

<script type="text/javascript" src="{{ STATIC_URL }}js/kinetic-v4.5.4.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/three.min.js"></script>

{% compress js %}
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/util.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/modals.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/geom.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/active_timer.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/mturk/submit.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/normals/experiments/rectify_continuous.coffee"></script>
{% endcompress %}

{% include "shapes/experiments/shapes_preload_script.html" %}
{% endblock %}
